<template>
	<view class="container">
		<view class="header">
			<view class="nav-bar">
				<uni-icons type="left" size="24" color="#fff" @click="goBack"></uni-icons>
				<text class="nav-title">预约详情</text>
			</view>
		</view>
		<!-- 核销码卡片 -->
		<view class="card verification-card">
			<view class="verification-title">核销码: {{verificationCode}}</view>
			<view class="qr-code-wrapper">
				<image class="qr-code" :src="qrCodeUrl" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 维修信息卡片 -->
		<view class="card info-card">
			<view class="card-title">维修信息</view>
			<view class="info-item">
				<text class="info-label">维修单号:</text>
				<text class="info-value">{{repairInfo.orderNumber}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">维修状态:</text>
				<text class="info-value status">{{repairInfo.status}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">车主姓名:</text>
				<text class="info-value">{{repairInfo.ownerName}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">联系方式:</text>
				<text class="info-value">{{repairInfo.contact}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">维修方式:</text>
				<text class="info-value">{{repairInfo.repairMethod}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">取车位置:</text>
				<text class="info-value">{{repairInfo.pickupLocation}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">预约日期:</text>
				<text class="info-value">{{repairInfo.appointmentDate}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">提交日期:</text>
				<text class="info-value">{{repairInfo.submitDate}}</text>
			</view>
		</view>

		<!-- 车辆信息卡片 -->
		<view class="card vehicle-card">
			<view class="card-title">车辆信息</view>
			<view class="info-item">
				<text class="info-label">车辆类型:</text>
				<text class="info-value">{{vehicleInfo.type}}</text>
			</view>
			<view class="info-item">
				<text class="info-label">车牌号:</text>
				<text class="info-value">{{vehicleInfo.plateNumber}}</text>
			</view>

			<view class="photo-section">
				<view class="photo-label">整车照片:</view>
				<view class="photo-wrapper">
					<image class="photo-item" :src="vehicleInfo.wholeVehiclePhoto" mode="aspectFill"></image>
				</view>
			</view>

			<view class="photo-section">
				<view class="photo-label">维修部位照片:</view>
				<view class="photo-wrapper multiple">
					<image v-for="(photo, index) in vehicleInfo.repairPhotos" :key="index" class="photo-item"
						:src="photo" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<button class="cancel-btn" @click="handleCancel">取消预约</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'

	// 响应式数据
	const verificationCode = ref('WE343235V')
	const qrCodeUrl = ref('')

	// 使用 reactive 创建响应式对象
	const repairInfo = reactive({
		orderNumber: '3535252',
		status: '进行中',
		ownerName: '张',
		contact: '1993829282',
		repairMethod: '上门取车',
		pickupLocation: '山阳区32号',
		appointmentDate: '2022/11/10 11:00',
		submitDate: '2022/11/08 12:34'
	})

	const vehicleInfo = reactive({
		type: '大客车',
		plateNumber: '豫J45323',
		wholeVehiclePhoto: '/static/vehicle.jpg',
		repairPhotos: [
			'/static/repair1.jpg',
			'/static/repair2.jpg',
			'/static/repair3.jpg'
		]
	})

	// 方法
	const generateQRCode = () => {
		// 这里可以使用uni-app的二维码生成插件，或者使用在线API
		// 暂时使用占位符
		qrCodeUrl.value = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + verificationCode.value
	}

	const goBack = () => {
		uni.reLaunch({
			url: '/pages/repair/fjmd/mdxq/ljyy/yycg/index'
		})
	}

	const handleCancel = () => {
		uni.showModal({
			title: '提示',
			content: '确定要取消预约吗？',
			success: (res) => {
				if (res.confirm) {
					uni.showToast({
						title: '已取消预约',
						icon: 'success'
					})
					// 可以在这里添加取消预约的逻辑
				}
			}
		})
	}

	// 生命周期
	onMounted(() => {
		generateQRCode()
	})
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #BBDEFB 0%, #FFFFFF 25%);
		padding: 20rpx;
		padding-bottom: 160rpx; // 为底部按钮留出空间
	}

	/* 蓝色头部 */
	.header {
		width: 100%;
		background-color: #3486fe;
		padding-top: var(--status-bar-height);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		height: calc(var(--status-bar-height) + 250rpx);
	}

	.nav-bar {
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		padding: 20rpx 30rpx;
		height: 250rpx;
		position: relative;
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		pointer-events: none;
	}

	.card {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		z-index: 110;
		position: relative;
		top: 130rpx;
	}

	.verification-card {
		.verification-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 30rpx;
			text-align: center;
		}

		.qr-code-wrapper {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}

		.qr-code {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.info-card,
	.vehicle-card {
		.card-title {
			font-size: 36rpx;
			color: #333333;
			font-weight: 600;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #F0F0F0;
		}

		.info-item {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #F0F0F0;

			&:last-child {
				border-bottom: none;
			}

			.info-label {
				font-size: 28rpx;
				color: #666666;
				flex-shrink: 0;
				min-width: 160rpx;
			}

			.info-value {
				font-size: 28rpx;
				color: #333333;
				text-align: right;
				flex: 1;
				margin-left: 20rpx;
				word-break: break-all;

				&.status {
					color: #FF9800;
					font-weight: 500;
				}
			}
		}
	}

	.photo-section {
		margin-top: 30rpx;

		.photo-label {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 20rpx;
		}

		.photo-wrapper {
			display: flex;
			gap: 20rpx;

			&.multiple {
				.photo-item {
					flex: 1;
					width: 0; // 确保flex布局正确
				}
			}

			.photo-item {
				width: 100%;
				height: 300rpx;
				border-radius: 8rpx;
				background: #F5F5F5;
				border: 1rpx solid #E0E0E0;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 120;
		position: relative;

		.cancel-btn {
			width: 30%;
			height: 88rpx;
			background: #2196F3;
			color: #FFFFFF;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			border: none;
			display: flex;
			align-items: center;
			justify-content: center;

			&::after {
				border: none;
			}

			&:active {
				opacity: 0.8;
			}
		}
	}
</style>